<template>
  <div class="header-container">
    <div class="header-left flex-box">
      <el-icon size="20" class="icon flex-box" @click="store.commit('collapseMenu')">
        <Expand />
      </el-icon>
      <ul class="flex-box">
        <li
          v-for="(item, index) in selectMenu"
          :key="item.path"
          :class="{ selected: route.path === item.path }"
          class="flex-box tab"
        >
          <el-icon size="12">
            <component :is="item.icon" />
          </el-icon>
          <router-link class="text flex-box" :to="{ path: item.path }">{{ item.name }}</router-link>

          <el-icon @click="closeTab(item, index)" class="close" size="12">
            <Close />
          </el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown>
        <div class="el-dropdown-link flex-box">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <p class="user-name">admin</p>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  const store = useStore()
  // 当前路由对象
  const route = useRoute()

  // 路由对象
  const router = useRouter()

  const selectMenu = computed(() => store.state.menu.selectMenu)

  const closeTab = (item, index) => {
    // 如果删除的是非当前路由，则不需要跳转
    if (route.path !== item.path) {
      store.commit('closeMenu', item)
      return
    }

    const selectMenuData = selectMenu.value
    // 如果删除的是最后一个tab，则跳转到首页
    if (index === selectMenuData.length - 1) {
      // 1.如果只有一个tab，则直接跳转到首页
      if (selectMenuData.length === 1) {
        store.commit('closeMenu', item)
        router.push({ path: '/' })
        return
      } else {
        // 2.有多个tab,则跳转到前一个tab
        router.push({
          path: selectMenuData[index - 1].path,
        })
        store.commit('closeMenu', item)
      }
    } else {
      // 如果删除的是中间的tab，则跳转到下一个tab
      router.push({
        path: selectMenuData[index + 1].path,
      })
      store.commit('closeMenu', item)
    }
  }
</script>

<style lang="less" scoped>
  .flex-box {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 100%;
    padding-right: 20px;
    .header-left {
      height: 100%;
      .icon {
        width: 45px;
        height: 100%;
        &:hover {
          background-color: #f5f5f5;
          cursor: pointer;
        }
      }
      .tab {
        padding: 0 10px;
        height: 100%;
        .text {
          margin: 0 5px;
        }
        .close {
          visibility: hidden;
        }
        &:hover {
          background-color: #f5f5f5;
          cursor: pointer;
          .close {
            visibility: visible;
            cursor: pointer;
            color: #000;
          }
        }
      }
      .selected {
        a {
          color: #409eff;
        }
        i {
          color: #409eff;
        }
        background-color: #f5f5f5;
      }
    }
    .header-right {
      .user-name {
        margin-left: 10px;
      }
    }
    a {
      height: 100%;
      color: #333;
      font-size: 15px;
    }
  }
</style>
